<style scoped>
.site-wrapper {
    padding: 20px 0;
}

.bm-view {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
}
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="site-wrapper">
            <Row>
                <Col span="8" offset="1">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Form-item label="机构名称" prop="productName">
                        <Input v-model="formItem.name" disabled placeholder="请输入机构名称"></Input>
                    </Form-item>
                    <Form-item label="机构简称" prop="plan">
                        <Input v-model="formItem.short_name" disabled placeholder="请输入机构简称"></Input>
                    </Form-item>
                    <Form-item label="所属公司" prop="select">
                        <Input v-model="formItem.c_name" disabled placeholder="请输入机构简称"></Input>
                    </Form-item>
                    <Form-item label="设立时间">
                        <Row>
                            <Col span="11">
                            <Date-picker type="date" placeholder="选择日期" v-model="formItem.create_date"></Date-picker>
                            </Col>
                        </Row>
                    </Form-item>
                    <Form-item label="联系电话" prop="plan">
                        <Input v-model="formItem.tel" placeholder="请输入联系电话"></Input>
                    </Form-item>
                    <Form-item label="负责人" prop="plan">
                        <Input v-model="formItem.principal" placeholder="请输入负责人"></Input>
                    </Form-item>
                    <Form-item label="公司类型" prop="select">
                        <Input v-model="formItem.org_cate" disabled placeholder="请输入负责人"></Input>
                    </Form-item>
                    <Form-item label="中资外资" prop="select">
                        <Select v-model="formItem.china_foreign" disabled :value="formItem.china_foreign" placeholder="请选择中资外资">
                            <Option value="中资">中资</Option>
                            <Option value="外资">外资</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="注册地" prop="plan">
                        <Input v-model="formItem.registe_addr" placeholder="请输入注册地"></Input>
                    </Form-item>
                    <Form-item label="状态" prop="plan">
                        <Input v-model="formItem.status" placeholder="请输入状态"></Input>
                    </Form-item>
                    <Form-item label="所属地区" prop="plan">
                        <!-- <Input v-model="formItem.province_city_county" placeholder="请输入"></Input> -->
                        <Cascader :data="area_data" :value="formItem.area" trigger="hover" @on-change="areaChange" placeholder="请输入所属地区"></Cascader>
                    </Form-item>
                    <Form-item label="地址" prop="plan">
                        <Input v-model="formItem.address" placeholder="请输入地址"></Input>
                    </Form-item>
                    <Form-item label="经纬度" prop="plan">
                        <Input v-model="formItem.lat_lng" placeholder="请输入经纬度"></Input>
                    </Form-item>
                    <baidu-map v-if="showMap" class="bm-view" :center="center" :scroll-wheel-zoom=true zoom="15" ak="8PuukfqnhGv9tZM6HiKrfDdjgsX7c8tD" @ready="baiduHandler">
                        <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
                        <!-- <bm-label content="我爱北京天安门" :position="{lng: 116.404, lat: 39.915}" :labelStyle="{color: 'red', fontSize : '24px'}" title="Hover me"/> -->
                    </baidu-map>
                    <Form-item label="周一到周五">
                        <Input v-model="formItem.mon_to_fri" placeholder="请输入周一到周五空闲时间"></Input>
                    </Form-item>
                    <Form-item label="周六">
                        <Input v-model="formItem.saturday" placeholder="请输入周六空闲时间"></Input>
                    </Form-item>
                    <Form-item label="周日">
                        <Input v-model="formItem.sunday" placeholder="请输入周日空闲时间"></Input>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" shape="circle" style="padding:6px 24px;"  @click="handleSubmit('formItem')">提交</Button>
                    </Form-item>
                </Form>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import city from '../../asset/js/city'
import { BaiduMap } from 'vue-baidu-map'
import { getSiteInfo } from '../../api/site'
export default {
    data() {
        return {
            showMap: false,
            formItem: {
                lat_lng: '',
                area: []
            },
            ruleValidate: {

            },
            area_data: city,
            center: {
                lng: 116.404,
                lat: 39.915
            }
        }
    },
    components: {
        productTitle,
        BaiduMap,
    },
    created() {
        this.getSite()
    },
    mounted() {
        this.showMap = true;
    },
    methods: {
        baiduHandler({ BMap, map }) {
            console.log(BMap, map)
            this.center.lng = this.formItem.longitude
            this.center.lat = this.formItem.latitude
        },
        areaChange(value, selectedData) {
            console.log(value)
            console.log(selectedData)
            this.formItem.area = value
            console.log(this.formItem.area)
        },
        getSite() {
            var _site = {
                yun_id: 1
            }
            new Promise((resolve, reject) => {
                getSiteInfo(_site).then(response => {
                    if (response.data.err == 0) {
                        //console.log(response.data)
                        this.formItem = response.data.data.detail
                        this.formItem.lat_lng = this.formItem.longitude + ',' + this.formItem.latitude
                        // this.center.lng = this.formItem.longitude
                        // this.center.lat = this.formItem.latitude
                        this.formItem.area = [this.formItem.province, this.formItem.city, this.formItem.county]
                    } else {

                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        handleSubmit(name) {
            console.log(this.formItem)
        }
    }
}
</script>

